<template>
  <div class="exam-container">
    <transition name="el-fade-in">
      <div class="exam-card" :class="{ 'has-result': !examStart }">
        <!-- 考试入口卡片 -->
        <div v-if="examStart" class="start-section">
          <div class="exam-icon">
            <i class="el-icon-s-opportunity"></i>
          </div>
          <h3 class="exam-title">心理状态评估测试</h3>
          <p class="exam-tips">完成测试可获得个性化建议</p>
          <el-button
              type="primary"
              class="start-btn"
              :loading="loading"
              @click="startExam"
          >
            <i class="el-icon-timer"></i>
            {{ loading ? '准备中...' : '立即开始测试' }}
          </el-button>
        </div>

        <!-- 结果展示卡片 -->
        <transition name="el-zoom-in-top">
          <div v-if="!examStart" class="result-section">
            <div class="result-header">
              <i class="el-icon-medal"></i>
              <h3>测评结果已生成</h3>
            </div>

            <div class="result-content">
              <p class="score-text">{{ advice }}</p>
              <div class="action-group">
                <el-button
                    type="success"
                    class="action-btn"
                    @click="startAi"
                >
                  <i class="el-icon-view"></i>
                  查看专业建议
                </el-button>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      examStart: true,
      userId: "",
      advice: "",
      loading: false
    };
  },
  created() {
    this.selectGrades();
  },
  methods: {
    async startExam() {
      this.loading = true;
      await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载
      this.$router.push("/examing");
    },
    startAi() {
      this.$router.push("/ai");
    },
    async selectGrades() {
      try {
        const user = JSON.parse(localStorage.getItem("user") || "{}");
        const res = await request.get("/grades/searchGrades", {
          params: { userId: user.id || "" }
        });

        if (res.code === '0' && res.data?.list?.length) {
          const grade = res.data.list[0];
          if (grade?.grades !== undefined) {
            this.examStart = false;
            this.advice = `测评完成，您的综合得分为 ${grade.grades} 分（满分100）`;
          }
        }
      } catch (error) {
        console.error("成绩获取失败:", error);
        this.$message.error("成绩加载失败，请刷新重试");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.exam-container {
  display: flex;
  justify-content: center;
  padding: 30px;
  min-height: 60vh;
}

.exam-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 600px;
  transition: all 0.3s ease;

  &.has-result {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  }
}

.start-section {
  text-align: center;

  .exam-icon {
    font-size: 80px;
    color: #409EFF;
    margin-bottom: 20px;
  }

  .exam-title {
    font-size: 24px;
    color: #303133;
    margin: 10px 0;
  }

  .exam-tips {
    color: #909399;
    font-size: 14px;
    margin-bottom: 30px;
  }
}

.start-btn {
  padding: 15px 40px;
  font-size: 16px;
  border-radius: 25px;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
  }

  i {
    margin-right: 8px;
  }
}

.result-section {
  .result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;

    i {
      font-size: 28px;
      color: #67C23A;
      margin-right: 10px;
    }

    h3 {
      color: #303133;
      margin: 0;
      font-size: 22px;
    }
  }

  .score-text {
    font-size: 18px;
    color: #606266;
    text-align: center;
    line-height: 1.6;
    margin: 25px 0;
  }
}

.action-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;

  .action-btn {
    padding: 12px 30px;
    border-radius: 20px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    i {
      margin-right: 8px;
    }
  }
}

@media (max-width: 768px) {
  .exam-card {
    padding: 25px;
    margin: 15px;
  }

  .action-group {
    flex-direction: column;
    gap: 15px;

    .action-btn {
      width: 100%;
    }
  }
}
</style>